<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <style>
            .logo-vyc {
                margin-top: 0;
                font-size: 20px;
            }
            .logo-vyc > img {
                max-width: 50px;
            }
            .flg-vn {width: 45%;display: inline-block;margin-right: 40px;}
            .flg-fr {width: 45%;display: inline-block;}
            .flg-vn > a,
            .flg-fr > a{
                display: block;
            }
            .flg-vn >a>img,
            .flg-fr >a>img {
                max-width: 100px;
            }
            .img-200 {
                max-width: 535px;
            }
            .img-desc {
                margin: 10px 0;
            }
        </style>
    </head>
    <body>
        <!-- popup Ring Size chart -->
        <div id="popup-window" class="modal fade popup-rsc">
            <div class="modal-dialog container">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="logo-vyc">
                            <img src="http://www.vyctravel.com/Images/dltn/new-logo.png" alt="VYCLogo"/>
                            VYCTravel - CTY Cổ phần du lịch TNXP
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        </h1>
                        
                    </div>
                    <div class="modal-body">                        
                        <div class="img-desc">
                            <img class="img-200" src="http://www.luxuryhalongbaycruise.com/hinhanh/cruises/HALONG_JASMINE_JUNK.jpg"/>
                        </div>
                        <h3 class="logo-vyc">Select your language / Chọn ngôn ngữ của bạn</h3>
                        <div class="flg-vn">
                            <a href="#">
                                <img class="pull-left media images-responsive" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Vietnam.svg/1024px-Flag_of_Vietnam.svg.png"/>
                            </a>
                            <a href="#">
                                <img class="pull-right media images-responsive" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/StarSpangledBannerFlag.svg/1280px-StarSpangledBannerFlag.svg.png"/>
                            </a>
                        </div>
                        <div class="flg-fr">
                            <a href="#">
                                <img class="pull-right media images-responsive" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" />                                
                            </a>
                            <a href="#">
                                <img class="pull-left media images-responsive" src="http://resources.woodlands-junior.kent.sch.uk/customs/images/uk.jpg" />                                
                            </a>
                        </div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

        <script>
            $(document).ready(function() {
                $('#popup-window').modal();
            });
        </script>
    </body>
</html>
